<template>
  <div>
    <div id="map-container"></div>
  </div>
</template>

<script>
import { queryPageProject } from "@/api/chart/index.js"
import AMapLoader from "@amap/amap-jsapi-loader" // 按需引入依赖
window._AMapSecurityConfig = {
  securityJsCode: "key:b5bc4f83bbcd458beb0f12f912d4a398" // 安全密钥
}
export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null,
      infoWindow: null,
      mapList: [],
      allMarker: [],
      infoWindow: null
    }
  },
  watch: {
    mapList: {
      handler(n, m) {
        this.initMap()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.queryPageProject()
  },
  mounted() {
    this.initMap()
  },
  methods: {
    async queryPageProject() {
      const data = await queryPageProject({ pageIndex: 1, pageSize: 20 })
      console.log(data)
      this.mapList = data.object.data
    },
    // 初始化地图2
    initMap() {
      AMapLoader.load({
        key: "4c1333a4be7bf72c5b683df714e3a01d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.MouseTool",
          "AMap.MapType",
          "AMap.HawkEye"
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("map-container", {
            viewMode: "2D", //  是否为3D地图模式
            zoom: 10.5, // 初始化地图级别
            center: [120.163561, 33.347382], //中心点坐标 盐城
            resizeEnable: true
          })

          // 添加左下角的比例尺
          this.map.add(new AMap.Scale())
          let toolBar = new AMap.ToolBar({
            position: {
              bottom: "210px",
              right: "35px"
            }
          })
          let controlBar = new AMap.ControlBar({
            position: {
              bottom: "280px",
              right: "10px"
            }
          })
          // 鼠标点击获取经纬度
          this.map.on("click", function (e) {
            // console.log("e---", e)
            // console.log("e.lnglat---", e.lnglat)
            console.log("经度", e.lnglat.getLng())
            console.log("纬度", e.lnglat.getLat())
          })
          // 地图上绘制点位
          this.mouseTool = new AMap.MouseTool(this.map)
          // 监听draw事件可获取画好的覆盖物
          this.mouseTool.on(
            "draw",
            function (e) {
              console.log("获取画好的覆盖物", e)
              this.overlays.push(e.obj)
            }.bind(this)
          )

          this.map.addControl(toolBar) // 添加右下角的放大缩小
          this.map.addControl(controlBar) // 方向盘
          this.map.addControl(new AMap.MapType()) // 添加右上角的标准图和卫星图  和路况
          this.map.addControl(new AMap.HawkEye()) // 添加地图放大镜
          this.infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: this.createInfoWindow("111"),
            offset: new AMap.Pixel(16, -25)
          })
          // this.map.on("zoomend", () => {
          //   let zoom = this.map.getZoom()
          //   if (zoom > 11) {
          //     this.setMarker(this.mapList)
          //   } else {
          //     this.map.remove(this.allMarker)
          //   }
          // })
          this.setMarker(this.mapList)
        })
        .catch((e) => {
          console.log(e)
        })
    },
    setMarker(markerList) {
      this.map.remove(this.allMarker)
      const icon = new AMap.Icon({
        // size: new AMap.Size(40, 50), // 图标尺寸
        // image: require("@/assets/map-img/动效1.gif") // Icon的图像
        // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
        // imageSize: new AMap.Size(40, 50) // 根据所设置的大小拉伸或压缩图片
      })
      this.allMarker = []
      markerList.map((e) => {
        const str = e.projectLatitude.split(",")
        var marker = new AMap.Marker({
          position: str
          // icon: icon
          // offset: new AMap.Pixel(-13, -30)
        })
        marker.data = e
        marker.on("mouseover", (e) => {
          this.infoWindow.setContent(this.createInfoWindow(e.target.data))
          console.log("markerMouseOver", e)
          this.infoWindow.open(this.map, e.target.getPosition())
        })
        marker.on("mouseout", (e) => {
          this.map.clearInfoWindow()
        })
        // marker.on("click", (e) => {
        //   console.log(111, e)
        //   if (e.lnglat) {
        //     this.infoWindow.setContent(this.createInfoWindow(e.target.data))
        //     // console.log('markerMouseOver',e)
        //     this.infoWindow.open(this.map, e.target.getPosition())
        //     // window.open(e.target.url)
        //   }
        // })
        marker.emit("click", { target: marker })
        this.allMarker.push(marker)
      })
      // 将 markers 添加到地图
      this.map.add(this.allMarker)
    },
    createInfoWindow(val) {
      let info =
        '<div class="map-box">' +
        '<div class="title">' +
        "鼎高信息科技有限公司" +
        "</div>" +
        '<div class="message">' +
        '<div class="name">' +
        "项目名称:" +
        '<span class="pro-name">' +
        val.projectName +
        "</span>" +
        "</div>" +
        '<div class="type">' +
        "项目类型:" +
        '<span class="pro-type">' +
        val.projectType +
        "</span>" +
        "</div>" +
        "</div>" +
        '<div class="num">' +
        '<div class="sb-num">' +
        '<div class="sb-name">' +
        "设备数量(台)" +
        "</div>" +
        '<div class="num">' +
        "23" +
        "</div>" +
        "</div>" +
        '<div class="cj-num">' +
        '<div class="cj-name">' +
        "应用场景数量(台)" +
        "</div>" +
        '<div class="num">' +
        "24" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>"

      return info
    },
    // 具体画图代码
    draw(type) {
      switch (type) {
        case "marker": {
          this.mouseTool.marker({
            //同Marker的Option设置
          })
          break
        }
        case "polyline": {
          this.mouseTool.polyline({
            strokeColor: "#80d8ff"
            //同Polyline的Option设置
          })
          break
        }
        case "polygon": {
          this.mouseTool.polygon({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff"
            //同Polygon的Option设置
          })
          break
        }
        case "rectangle": {
          this.mouseTool.rectangle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff"
            //同Polygon的Option设置
          })
          break
        }
        case "circle": {
          this.mouseTool.circle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff"
            //同Circle的Option设置
          })
          break
        }
      }
    }
  }
}
</script>
<style lang="scss">
.map-box {
  width: 340px;
  padding-top: 25px;
  height: 203.32px;
  background: url("../../assets/map-img/Frame 734.png") no-repeat;
  background-size: 100%;
  border-radius: 4px;
  .title {
    width: 300px;
    margin: 0 auto 15px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #343434;
    text-align: center;
  }
  .message {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    .name {
      font-weight: 600;
      .pro-name {
        font-weight: 400;
      }
    }
    .type {
      font-weight: 600;
      .pro-type {
        font-weight: 400;
      }
    }
  }
  .num {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    .sb-num {
      font-weight: 600;
      .num {
        font-size: 28px;
        color: #07c160;
      }
    }
    .cj-num {
      font-weight: 600;
      .num {
        font-size: 28px;
        color: #f66cae;
      }
    }
  }
}
</style>
<style scoped>
#map-container {
  overflow: hidden;
  width: 100%;
  height: 95vh;
  margin: 0;
}
</style>
